<template>
  <el-container class="layout-container-demo" style="height: 95%">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['2', '4']">
<!--          <el-menu :default-openeds="['1', '4']">-->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>施工图纸
            </template>
            <el-menu-item-group>
              <template #title>混凝土工程</template>
              <el-menu-item index="1-1">桩基</el-menu-item>
              <el-menu-item index="1-2">挡墙</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="土石方工程">
              <el-menu-item index="1-3">软基处理</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>经济资料
            </template>
            <el-sub-menu index="2-1">
              <template #title>施工合同</template>
              <el-menu-item index="2-1-1">合 同</el-menu-item>
              <el-menu-item index="2-1-2">清 单</el-menu-item>
              <el-menu-item index="2-1-3">设计工程量</el-menu-item>
              <el-menu-item index="2-1-4">已完工程量</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2-2">
              <template #title>采购合同 </template>
              <el-menu-item index="2-2-1">合同</el-menu-item>
              <el-menu-item index="2-2-2">清单</el-menu-item>
              <el-menu-item index="2-2-3">合同工程量</el-menu-item>
              <el-menu-item index="2-2-4">已完工程量</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2-3">
              <template #title>劳务合同1 </template>
              <el-menu-item index="2-3-1">合同</el-menu-item>
              <el-menu-item index="2-3-2">清单</el-menu-item>
              <el-menu-item index="2-3-3">合同工程量</el-menu-item>
              <el-menu-item index="2-3-4">已完工程量</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>施工记录
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><setting /></el-icon>安全资料
            </template>
            <el-sub-menu index="4-1">
              <template #title>工人入场信息登记</template>
              <el-menu-item index="4-1-1">基本信息</el-menu-item>
              <el-menu-item index="4-1-2">考勤记录</el-menu-item>
              <el-menu-item index="4-1-3">工资发放记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4-2">
              <template #title>设备入场信息登记</template>
              <el-menu-item index="4-2-1">基本信息</el-menu-item>
              <el-menu-item index="4-2-2">考勤记录</el-menu-item>
              <el-menu-item index="4-2-3">工资发放记录</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><setting /></el-icon>质检资料
            </template>
            <el-sub-menu index="5-1">
              <template #title>测量数据</template>
              <el-menu-item index="5-1-1">放样记录</el-menu-item>
              <el-menu-item index="5-1-2">水准测量</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5-2">
              <template #title>钢筋</template>
              <el-menu-item index="5-2-1">材料入场记录</el-menu-item>
              <el-menu-item index="5-2-2">原材料送检记录</el-menu-item>
              <el-menu-item index="5-2-3">隐蔽验收记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5-3">
              <template #title>混凝土</template>
              <el-menu-item index="5-3-1">原材料送检记录</el-menu-item>
              <el-menu-item index="5-3-2">浇筑混凝土申请单</el-menu-item>
              <el-menu-item index="5-3-3">混凝土浇筑记录</el-menu-item>
              <el-menu-item index="5-3-4">7天混凝土强度报告</el-menu-item>
              <el-menu-item index="5-3-5">28天混凝土强度报告</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5-4">
              <template #title>检验批</template>
              <el-menu-item index="5-4-1">质量评定表</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
<!--      <el-header style="text-align: right; font-size: 12px">
        &lt;!&ndash;        <div class="toolbar">
                  <el-dropdown>
                    <el-icon style="margin-right: 8px; margin-top: 1px">
                      <setting />
                    </el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>View</el-dropdown-item>
                        <el-dropdown-item>Add</el-dropdown-item>
                        <el-dropdown-item>Delete</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <span>Tom</span>
                </div>&ndash;&gt;
        <div class="flex space-x-2 justify-center mt-2" >

          <ul style="list-style-type: none; display: flex; justify-content: left;" >
            <li>桩基工程数据概览</li>
            <li><el-input type="text" v-model="queryParams.pileNumber" placeholder="请输入桩号"></el-input></li>
            <li>
              <el-button @click="select">查询</el-button>
            </li>
          </ul>
        </div>


      </el-header>-->

      <el-main>
        <el-scrollbar>
          <el-table
              :data="pileData"
              style="width: 100%"
              border
              @row-click="pileClick"
          >
            <el-table-column
                prop="id"
                label="ID"
                width="80"
                align="center"
                class-name="whitespace-nowrap"
            />
            <el-table-column
                prop="pileNumber"
                label="桩基号"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileNumber" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="mileage"
                label="里程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.mileage" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="offset"
                label="偏距"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.offset" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="coordinateX"
                label="坐标X"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.coordinateX" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="coordinateY"
                label="坐标Y"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.coordinateY" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileBottomElevation"
                label="桩底高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileBottomElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileTopElevation"
                label="桩顶高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileTopElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileDiameter"
                label="桩径"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileDiameter" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileLength"
                label="桩长"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileLength" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="steelCageLength"
                label="钢筋笼长度"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.steelCageLength" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="overPouringLength"
                label="超灌长度"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.overPouringLength" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="groundElevation"
                label="地面高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.groundElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="actualPileBottomElevation"
                label="实际桩底高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.actualPileBottomElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="excavationTime"
                label="开挖时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.excavationTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="holeOpeningTime"
                label="开孔时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.holeOpeningTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="holeCompletionTime"
                label="成孔时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.holeCompletionTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="reinforcementCageLoweringTime"
                label="下钢筋笼时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.reinforcementCageLoweringTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="conduitLoweringTime"
                label="下导管时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.conduitLoweringTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="pouringTime"
                label="浇筑时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pouringTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="testBlockNumber"
                label="试块编号"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.testBlockNumber" size="small" />
              </template>
            </el-table-column>
            <!-- 编辑和删除按钮列 -->


            <el-table-column fixed="right" label="操作" min-width="200">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="editRow(scope.row)">编辑</el-button>
                <el-button link type="primary" size="small"  @click="CreatExportRow(scope.row)">生成内业资料</el-button>
              </template>
            </el-table-column>

          </el-table>
          <!-- 分页部分 -->
          <div class="flex justify-center mt-4">
            <el-button @click="prevPage" :disabled="currentPage === 1">上一页</el-button>
            <span class="mx-2">{{ currentPage }} / {{ totalPages }}</span>
            <el-button @click="nextPage" :disabled="currentPage === totalPages">下一页</el-button>
          </div>
          <!-- 子组件弹出框 -->
          <PileDataEdit ref="editRef" :data="editRowData" @save="handleSave" />
          <PileExcelPouringExport ref="createRef" :data="editRowData"  />
          <PileDataQueryForm @queryData="select2"></PileDataQueryForm>
        </el-scrollbar>

      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import {ElButton, ElInput, ElTable, ElTableColumn} from "element-plus";
import axios from "axios";
import PileDataEdit from "@/views/pile/components/PileDataEdit.vue";
import {getPiles} from '@/apis/api_pile'
import PileDataQueryForm from "@/views/pile/components/PileDataQueryForm.vue";
import PileExcelPouringExport from "@/views/pile/components/pileExcelPouringExport.vue";
const pileData = ref([]);
const currentPage = ref(1);
const itemsPerPage = ref(12);
const totalPages = ref(1);
const queryParams = ref({
  id: '',
  pileNumber: '',
  mileage: '',
  offset: '',
  coordinateX: '',
  coordinateY: '',
  pileBottomElevation: '',
  pileTopElevation: '',
  pileDiameter: '',
  pileLength: '',
  steelCageLength: '',
  overPouringLength: '',
  groundElevation: '',
  actualPileBottomElevation: '',
  excavationTime: '',
  holeOpeningTime: '',
  holeCompletionTime: '',
  reinforcementCageLoweringTime: '',
  conduitLoweringTime: '',
  pouringTime: '',
  testBlockNumber: '',
});

const editRowData = ref({}); // 传递给子组件的待编辑数据
const getPileData = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: itemsPerPage.value,
    ...queryParams.value
  };

  axios
      .get(`http://192.168.1.245:8080/pileData/page`, { params })
      .then((res) => {
        pileData.value = res.data.records;
        totalPages.value = Math.ceil(res.data.total / itemsPerPage.value);
      })
      .catch((error) => {
        console.log("数据错误", error);
      });
};



const pileClick = (row, event, column) => {
  console.log('选中行数据', row);
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    getPileData();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    getPileData();
  }
};

const fetchData = () => {
  currentPage.value = 1;
  getPileData();
};


const editRef=ref(null);
const editRow = (row) => {
  console.log("编辑行数据",row);
  editRef.value.openDialog(row)
  editRowData.value = {...row }; // 将待编辑的数据传递给子组件
};

const createRef=ref(null);
const CreatExportRow = (row) => {
  console.log('生成资料', row);
  createRef.value.openDownDialog(row)
  editRowData.value = {...row }; // 将待编辑的数据传递给子组件
};


/*const select=async ()=>{
  //console.log(queryParams.value);
  currentPage.value = 1;
  const res=await getPiles(currentPage.value,itemsPerPage.value,queryParams.value);
  console.log(res);
  pileData.value = res.records;
  totalPages.value = Math.ceil(res.total / itemsPerPage.value);
}*/
const select2 =async(params) => {
  queryParams.value = params.value;
  currentPage.value = 1;
  // 过滤对象中值为 null 的属性
  const filteredQueryParams = Object.fromEntries(
      Object.entries(queryParams.value).filter(([_, value]) => value!== null)
  );

  const res = await getPiles(currentPage.value, itemsPerPage.value, filteredQueryParams);
  console.log(res);
  pileData.value = res.records;
  totalPages.value = Math.ceil(res.total / itemsPerPage.value);


};


const handleSave = (updatedData) => {
  // 找到要更新的数据在列表中的索引
  const index = pileData.value.findIndex((item) => item.id === updatedData.id);
  if (index!== -1) {
    pileData.value[index] = updatedData;
  }
  getPileData();
}
onMounted(()=>getPileData())
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>